import React, { useEffect } from 'react';
import { Card, Row, Col, Statistic, Typography, Select } from 'antd';
import { UserOutlined, FileTextOutlined, SettingOutlined, DashboardOutlined } from '@ant-design/icons';
import { useTheme } from '../../hooks/useTheme';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { themeUtils } from '../../utils/themeConfig';
import ThemeToggle from '../../compages/ThemeToggle';
import { useDispatch } from 'react-redux';

const { Title, Paragraph } = Typography;

function Index() {
    const nav=useNavigate()
    const dispatch = useDispatch();
    const { isLight } = useTheme();
    const { t, i18n } = useTranslation();
    // 自动跟随系统主题
    useEffect(() => {
      // 主题跟随系统，ThemeToggle 负责切换
      // 监听系统主题变化
      const unwatch = themeUtils.watchSystemTheme(() => {
        // 主题跟随系统，ThemeToggle 负责切换
      });
      return () => {
        if (unwatch) unwatch();
      };
    }, [dispatch]);

  // 主题切换动画
  // 语言切换下拉框
  const languageOptions = [
    { value: 'zh', label: <span>🇨🇳 中文</span> },
    { value: 'en', label: <span>🇺🇸 English</span> },
    { value: 'ko', label: <span>🇰🇷 한국어</span> },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginBottom: 16, gap: 12 }}>
        <Select
          value={i18n.language}
          style={{ minWidth: 120, borderRadius: 8 }}
          options={languageOptions}
          onChange={lng => i18n.changeLanguage(lng)}
          dropdownStyle={{ borderRadius: 8, minWidth: 140 }}
          size="large"
        />
        <ThemeToggle />
      </div>
      
      <div style={{ marginBottom: '24px' }}>
        <Title level={2} style={{ color: isLight ? '#262626' : '#ffffff', textAlign: 'center' }}>{t('ment.welcome')}</Title>
        <Paragraph style={{ color: isLight ? '#595959' : '#d9d9d9', textAlign: 'center' }}>{t('ment.desc')}</Paragraph>
      </div>

      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title={t('ment.userTotal')}
              value={1128}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title={t('ment.docTotal')}
              value={93}
              prefix={<FileTextOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title={t('ment.setting')}
              value={15}
              prefix={<SettingOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title={t('ment.dashboard')}
              value={8}
              prefix={<DashboardOutlined />}
              valueStyle={{ color: '#fa8c16' }}
            />
          </Card>
        </Col>
      </Row>

      <Row style={{ marginTop: '24px' }}>
        <Col span={24}>
          <Card title={t('ment.features')}>
            <Row gutter={[16, 16]}>
              <Col xs={24} sm={12} md={8}>
                <div style={{ textAlign: 'center', padding: '16px' }}>
                  <UserOutlined style={{ fontSize: '32px', color: '#1890ff', marginBottom: '8px' }} />
                  <div style={{ fontWeight: 'bold', marginBottom: '4px' }} onClick={()=>nav('/home/index')}>{t('ment.userManage')}</div>
                  <div style={{ color: isLight ? '#8c8c8c' : '#bfbfbf' }}>{t('ment.userManageDesc')}</div>
                </div>
              </Col>
              <Col xs={24} sm={12} md={8}>
                <div style={{ textAlign: 'center', padding: '16px' }}>
                  <DashboardOutlined style={{ fontSize: '32px', color: '#fa8c16', marginBottom: '8px' }} />
                  <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>{t('ment.dataStat')}</div>
                  <div style={{ color: isLight ? '#8c8c8c' : '#bfbfbf' }}>{t('ment.dataStatDesc')}</div>
                </div>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

export default Index;
